<template>
  <div class="container">
    <!-- 搜索 -->
    <el-form label-width="80px" inline>
      <el-form-item>
        <el-input
          autocomplete="off"
          v-model="searchContent"
          placeholder="请输入要搜索的内容"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="
        orderList.filter(
          (item) =>
            !searchContent ||
            item.time.toLowerCase().includes(searchContent.toLowerCase()) ||
            item.serviceId.name
              .toLowerCase()
              .includes(searchContent.toLowerCase()) ||
            item.shopDoorId.name
              .toLowerCase()
              .includes(searchContent.toLowerCase())
        )
      "
      border
      style="width: 100%; margin: auto"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="服务名称：">
              <span>{{ props.row.serviceId.name }}</span>
            </el-form-item>
            <el-form-item label="所属店铺：">
              <span>{{ props.row.shopDoorId.name }}</span>
            </el-form-item>
            <el-form-item label="预约时间：">
              <span>{{ props.row.time }}</span>
            </el-form-item>
            <el-form-item label="预约用户名称：">
              <span>{{ props.row.userId.username }}</span>
            </el-form-item>
            <el-form-item label="服务分类：">
              <span>{{ props.row.serviceId.type }}</span>
            </el-form-item>
            <el-form-item label="店铺地址：">
              <span>{{ props.row.shopDoorId.address }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="serviceId.name" label="所选服务">
      </el-table-column>
      <el-table-column prop="time" label="预约时间"> </el-table-column>
      <el-table-column prop="userId.username" label="预约用户名称">
      </el-table-column>
      <el-table-column prop="adminId.name" label="门店管理员信息">
      </el-table-column>
      <el-table-column prop="shopDoorId.name" label="门店信息">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        ref="info"
        background
        @size-change="handleSizeChange"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="1"
        :current-page="1"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import service from "../../utils/request";
export default {
  data() {
    return {
      searchContent: "",
      orderList: [],
      total: 0,
      adminId: localStorage.getItem("adminId"),
    };
  },
  computed: {},
  mounted() {
    service.get(`/orderService`).then((res) => {
      this.orderList = res.rows;
      this.total = res.total;
    });
  },
  methods: {
    // 分页
    handleSizeChange() {
      // 每页显示几条数据
      let size = this.$refs.info.internalPageSize;
      // 当前显示第几页
      let current = this.$refs.info.internalCurrentPage;
      service
        .get(`/orderService`, {
          params: {
            size: size,
            current: current,
          },
        })
        .then((res) => {
          this.orderList = res.rows;
          this.total = res.total;
        });
    },
    handleCurrentChange() {
      // 每页显示几条数据
      let size = this.$refs.info.internalPageSize;
      // 当前显示第几页
      let current = this.$refs.info.internalCurrentPage;
      service
        .get(`/orderService`, {
          params: {
            size: size,
            current: current,
          },
        })
        .then((res) => {
          this.orderList = res.rows;
          this.total = res.total;
        });
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 130px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
/* 分页 */
.container .el-pagination {
  margin: 20px 0 0 25px;
}
</style>